<!DOCTYPE html>
<html>
<head>

    <title>A basic example of a Line chart that uses the pseudo events</title>

    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A basic example of the Line chart pseudo-events. It shows an example Line chart and there is little happening on the page so the source is easy to navigate." />
    <meta name="googlebot" content="NOODP">

    <!-- 1/3. Include the RGraph libraries -->
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

</head>

<body>

    <h1>A basic example of a Line chart that uses the pseudo events</h1>

    <!-- 2/3. This is the canvas that the chart is drawn on -->
    <canvas id="cvs" width="1000" height="250">[No canvas support]</canvas>

    <!--
        3/3. This creates and displays the chart. As below, you can call this from the window.onload event,
             allowing you to put it in your pages header.
    -->
    <script>
        $(document).ready(function ()
        {
            /**
            * This is the function for the mousemove event. It changes the pointer to the hand.
            * When the mouse is moved away from the point the pointer is changed back to what it was
            * automatically for you.
            * 
            * @param object e     The event object
            * @param array  point The details of the point that was mouseover'ed
            */
            function myMousemove (e, point)
            {
                e.target.style.cursor = 'pointer';
            }


            /**
            * This is the function for the click event.
            * 
            * @param object e     The event object
            * @param array  point The details of the point that was clicked
            */
            function myClick (e, point)
            {
                alert('A point was clicked');
            }


            var bar = new RGraph.Line({
                id: 'cvs',
                data: [12,13,16,15,16,19,19,12,23,16,13,24],
                options: {
                    events: {
                        mouse: myMousemove,
                        click: myClick
                    },
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }
            }).draw()
            
            bar.onclick = myClick;
            bar.onmousemove = myMousemove;
        })
    </script>
    
    <p>
        This is a basic example of the Line chart that shows you how to use the pseudo-events that RGraph has:
    </p>
    
    <ul>
        <li>events.click</li>
        <li>events.mousemove</li>
    </ul>
    
    <p>
        Here the mousemove event is used to change the mouse cursor (it's automatically changed back for you). And the click event
        is used to show an alert.
    </p>

</body>
</html>